Se você algum dia fez uma página web já apanhou com o posicionamento de elementos dentro da página.
Este documento ilustra alguns problemas mais comuns.
Provavelmente você nunca encontrará problemas com este tipo de elemento porque eles não podem
ser dimensionados pela sua natureza que é definida por default pelo browser.
No browser eles ocupam o tamanho que precisam, a altura, largura é
o próprio browser quem controla portanto, estes elementos nunca poderão fazer parte de um design
diferenciado porque eles não admitem isso.
Veja um exemplo - Como o browser exibe :
SPAN1 SPAN2
Código dos itens :
<span style="background-color:lightblue">SPAN1</span>
<span style="background-color:lightgreen;width:200px;height:200px">SPAN2</span>
Como vocês podem notar, tanto a altura do item como a largura do item foram ignorados pelo browser.
Estes serão os itens que iremos estudar.
Por natureza eles ocupam de maneira exclusiva uma linha no browser.
Explicando melhor, se o elemento tipo block estiver numa linha que já tenha algo ele começará a ser
renderizado na linha seguinte, no começo dela.
Não importa se o item é grande ou pequeno, ele sempre ocupara uma linha inteira.
Veja o exemplo abaixo - Como é exibido pelo browser :
tem_um_bagulho_antes
Como foi definido no código html :
tem_um_bagulho_antes<div style="background-color:lightgreen;">Conteúdo da div.</div>
Sendo assim é impossível exibir 2 elementos tipo block um dentro do outro pelos recursos que o browser exibe por default, pois cada um ocuparia uma linha distinta.
Veja o exemplo abaixo - Como o browser exibe :
Como foi definido no código :
<div style="background-color:lightgreen;">Conteúdo da div.1</div>
<div style="background-color:lightblue;">Conteúdo da div.2</div>
Mas pera aí...e se uma div estiver dentro da outra ?
Veja o exemplo abaixo - Como o browser exibe :
Como foi definido no código :
<div style="background-color:lightgreen;">
Conteúdo da div.1
<div style="background-color:lightblue;">
Conteúdo da div.2
</div>
</div>
Deu pra notar que o browser nem tomou nota que uma esta dentro da outra.
Ainda tem um outro detalhe...e se a de fora fosse grande o bastante para caber a de dentro?.
Veja o exemplo abaixo - Como o browser exibe :
Como foi definido no código :
<div style="background-color:lightgreen;width:300px;height:100px">
Conteúdo da div.1
<div style="background-color:lightblue;width:200px;height:50px">
Conteúdo da div.2
</div>
</div>
Oba, funcionou...conseguimos encaixar um elemento bloco dentro de outro elemento bloco sem que cada um deles ocupassem exclusivamente uma linha inteira com ajuda dos estilos.
Contudo os elementos ficaram alinhados à esquerda. Por puro exercício, vamos centralizar o elemento mais interno em relação ao elemento mais externo.
Veja o exemplo abaixo - Como o browser exibe :
Como foi definido no código :
<div style="background-color:lightgreen;width:300px;height:100px">
Conteúdo da div.1
<div style="background-color:lightblue;width:200px;height:50px;margin-left: auto;margin-right: auto;">
Conteúdo da div.2
</div>
</div>
Portanto o enigma de como encaixar um elemento tipo bloco em outro elemento tipo bloco esta encerrado? Certo?
Se falou que sim enganei você. A div de dentro só esta no centro porque tem um texto na div1 que esta 'centralizando' a div2 no centro. Vou retirar o texto da div1.
Veja o exemplo abaixo - Como o browser exibe :
Como foi definido no código :
<div style="background-color:lightgreen;width:300px;height:100px">
<div style="background-color:lightblue;width:200px;height:50px;margin-left: auto;margin-right: auto;">
Conteúdo da div.2
</div>
</div>
Observando agora o efeito da retirada do texto vemos que as duas divs estão alinhadas pelo topo.
Como fazemos para deixar a div2 centralizada em relação a div1 ?
Eu como você evito de inventar a roda. Se o Margin-Right=Auto e Margin-Left=Auto centralizaram o conteúdo horizontalmente vamos fazer o mesmo com todas as margens.
Veja o exemplo abaixo - Como o browser exibe :
Como foi definido no código :
<div style="background-color:lightgreen;width:300px;height:100px">
<div style="background-color:lightblue;width:200px;height:50px;margin-left: auto;margin-right: auto; margin-top:auto;margin-bottom:auto;">
Conteúdo da div.2
</div>
</div>
Também experimentei colocar o estilo margin:auto; e também não funcionou.
Também não funcionaram :
1-margin-top:10px;
2-vertical-align:middle;
3-text-align:center; - Só alinhou o texto na horizontal.
4-align-content:center - Acho que é só o alinhamento horizontal.
5-align-items:center - Acho que é só o alinhamento horizontal.
6-padding:20px - Só aumentou a altura do elemento.
Como estamos vendo o jeito é deslocar a segunda div em relação a primeira e para isto podemos fazer a posição da segunda div ser relativa a posição que seria exibida e acrescentamos um desvio do topo de alguns pixels ou porcentagem. Vejamos o resultado :
Como o browser exibe :
Como foi definido no código :
<div style="background-color:lightgreen;width:300px;height:100px">
<div style="background-color:lightblue;width:200px;height:50px;margin-left:auto;margin-right:auto;position:relative;top:25%; ">
Conteúdo da div.2
</div>
</div>
Com isto conseguimos o efeito desejado, uma div alinhada ao centro da outra.